<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiper" :key="item"
        ><img class="swiper-img" :src="item.image_url"
      /></van-swipe-item>
    </van-swipe>
    <div class="box">
      <!-- 中间的导航 -->
      <div class="nav-con">
        <div class="q1" v-for="item in nav" :key="item.id" @click="fen(item.id)">
          <img :src="item.icon_url" />
          <p>{{ item.name }}</p>
        </div>
      </div>
      <h3>品牌制造商直供</h3>
      <!-- 内容部分 -->
      <div class="con">
        <div class="q2" v-for="item in list" :key="item">
          <img class="img1" :src="item.new_pic_url" />
          <p class="q3">{{ item.floor_price }}元起</p>
          <p class="q3">{{ item.name }}</p>
        </div>
      </div>
    </div>
    <!-- 底下的导航 -->
    <Nav />
  </div>
</template>
<script>
import Nav from "../components/nav";
export default {
  components: {
    Nav,
  },
  data() {
    return {
      swiper: [],
      nav: [],
      list: [],
    };
  },
  mounted() {
    this.$axios
      .get("http://shop.bufantec.com/bufan/index/index ")
      .then((res) => {
        this.swiper = res.data.banner;
        this.nav = res.data.channel;
        this.list = res.data.brandList;
      });
  },
  methods:{
    fen(id){
      this.$router.push({path:"/fen",query:{id:id}})
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.my-swipe .van-swipe-item {
  height: 200px;
}
.swiper-img {
  width: 100%;
}
.box {
  width: 100%;
  height: 500px;
  background: rgba(211, 211, 211, 0.292);
}
.nav-con {
  width: 100%;
  height: 100px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.q1 {
  width: 66px;
  height: 66px;
  text-align: center;
  line-height: 20px;
}
.con {
  width: 100%;
  height: 300px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: space-around;
}
.q2 {
  width: 180px;
  height: 130px;
}
.img1 {
  width: 180px;
  height: 130px;
}
h3 {
  width: 100%;
  height: 60px;
  background: #fff;
  margin-top: 10px;
  text-align: center;
  line-height: 60px;
}
.q3 {
  margin-top: -60px;
  margin-left: 20px;
}
</style>